<template>
    <div class="change-telephone">
        <header >
            <el-button icon="el-icon-arrow-left" type='text' primary='default' v-if='$store.state.isPc'>
                <router-link to='/user-center'>用戶中心</router-link>
            </el-button>
            <p>設定資金密碼</p>
        </header>
        <div class="main">
            <div class="item">
                <el-alert
                    title="設定資金密碼將用於數位資產的提款，保護您的數位資產不被他人輕易盜用。"
                    type="warning"
                    show-icon
                    :closable='false'>
                </el-alert>
            </div>
            <el-form :model='formData' :rules="rules" ref="ruleForm">
                <div class="item">
                    <el-form-item prop="pwd1">
                        <el-input placeholder="設定資金密碼" v-model="formData.pwd1" type="password"></el-input>
                    </el-form-item>
                </div>
                <div class="item">
                    <el-form-item prop="pwd2">
                        <el-input placeholder="設定資金密碼" v-model="formData.pwd2" type="password"></el-input>
                    </el-form-item>
                </div>
            </el-form>
            <div class="item">
                <el-button type='primary' class='width100' @click='setPwdConfirm'>確定</el-button>
            </div>
        </div>
    </div>
</template>

<script>
    import  { SetTradePwd } from '@/api/user'
    export default {
        data() {
            let reg = /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[~!@#$%^&*()_+`\-={}:";'<>?,.\/]).{4,16}$/;
            let checkPwd = (rule, value, callback) => {
                if (value === '' || !value) {
                    callback(new Error('請輸入資金密碼'));
                } else if (value.length < 6) {
                    callback(new Error('密碼長度不許大於6個字元'))
                } else if (!reg.test(value)) {
                    callback(new Error('資金密碼必须至少包含一个数字，一个大写字母，一个特殊符号'))
                } else {
                    callback();
                }
            }

            return {
                formData : {
                    pwd1 : null,
                    pwd2 : null,
                },
                rules : {
                    pwd1 : [{validator : checkPwd}],
                    pwd2 : [{validator : checkPwd}],
                }
                
            };
        },
        computed : {
            
        },
        methods : {
            setPwdConfirm () {
                this.$refs.ruleForm.validate((valid) => {
                    if (valid) {
                        //验证两个密码是否一样
                        if (this.formData.pwd1 != this.formData.pwd2) {
                            this.$alert('兩次輸入的密碼不一致', '提示')
                            return;
                        }

                        SetTradePwd({
                            password : this.formData.pwd1
                        }).then(res => {
                            this.$message({
                                message : '设置成功',
                                type : 'success'
                            })
                            this.$router.back()
                        })
                    } else {
                        return false;
                    }
                })
            }
        }
    }
</script>
<style lang="less" scoped>
    @import url('../../assets/css/_b.less');
    @media screen and (max-width : 670px) {
        .change-telephone {
            width: 80%;
            background: #fff;
            margin: 30px auto;
            padding: 15px 5%;
            header {
                position: relative;
                padding: 30px;
                border-bottom: 1px solid @borderColor;
                text-align: center;
                .el-button {
                    position: absolute;
                    left: 30px;
                }
                p {
                    font-size: 28px;
                    font-weight: bold;
                    text-align: center;
                }
            }
            .main {
                padding-bottom: 30px;
                img {
                    width: 64px;
                    height: 64px;
                }
                .item {
                    // width: 390px;
                    margin: 30px auto;
                }
                .imgs {
                    .line {
                        width: 100px;
                        height: 1px;
                        border-top: 1px dashed @borderColor;
                        margin-bottom: 45px;
                    }
                    p {
                        padding: 15px 0;
                        color: @textColorOne;
                    }
                }
                .telephone {
                    font-size: 15px;
                    color: @textColorTwo;
                    margin-bottom: 15px;
                }
            }
        }
    }
    @media screen and (min-width : 670px) {
        .change-telephone {
            width: 1010px;
            box-shadow: 0 4px 8px 0 rgba(225, 234, 240, 0.8);
            background: #fff;
            margin: 60px auto;
            header {
                position: relative;
                padding: 30px;
                border-bottom: 1px solid @borderColor;
                text-align: center;
                .el-button {
                    position: absolute;
                    left: 30px;
                }
                p {
                    font-size: 28px;
                    font-weight: bold;
                    text-align: center;
                }
            }
            .main {
                padding-bottom: 30px;
                img {
                    width: 64px;
                    height: 64px;
                }
                .item {
                    width: 390px;
                    margin: 30px auto;
                }
                .imgs {
                    .line {
                        width: 200px;
                        height: 1px;
                        border-top: 1px dashed @borderColor;
                        margin-bottom: 45px;
                    }
                    p {
                        padding: 15px 0;
                        color: @textColorOne;
                    }
                }
                .telephone {
                    font-size: 15px;
                    color: @textColorTwo;
                    margin-bottom: 15px;
                }
            }
        }
    }
</style>